.rule-list-page {

  & > .#{componentName('page-card-content')} {
    background-color: transparent;
  }

  .rule-list-data-section {
    .rule-list-section {
      background-color: plv(bg-2);

      & > .layout-section-separator {
        border-bottom-color: transparent;
      }
    }

    .rule-result-section {
      background-color: plv(bg-2);
    }

    & > .layout-section-separator, & > .layout-section-collapse-btn {
      z-index: 2;
    }

    & > .layout-section-separator {
      border-right-color: transparent !important;
    }
  }

  .rule-list-editor-section {

    .rule-list-empty-button {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .layout-section-inner {
      bottom: 0 !important;
    }

    .rule-editor-header-layout-section {
      .layout-section-inner {
        background-color: plv(bg-2);
      }
    }

    .layout-section-position-right {
      & > .layout-section-inner {
        background-color: plv(bg-2);
      }

      & > .layout-section-separator {
        border-color: transparent;
      }
    }
  }

  @include sizeMixin(page-card, ()) {
    .rule-list-data-section {
      & > .layout-section-inner {
        right: $margin !important;
      }
    }
    .rule-list-section, .rule-result-section {
      border-radius: $border-radius;
    }
    .rule-result-section {
      margin-top: $margin;
    }
    .rule-list-editor-section {

      .rule-editor-content-section {
        & > .layout-section-inner {
          left: 0 !important;
          right: 0 !important;
        }
      }

      .rule-editor-header-layout-section {
        .layout-section-inner {
          left: 0;
          right: 0;
          border-radius: $border-radius;
        }

        & > .layout-section-separator {
          border-bottom-color: transparent;
        }
      }

      .layout-section-position-right {
        & > .layout-section-inner {
          border-radius: $border-radius;
          left: $margin;
        }
      }
    }
  }
}
